<template>
  <view class="login-container">
    <view class="header">uni-app移动端</view>
    <view class="login-form">
      <view class="form-box">
        <u-transition show>
          <view class="h2">欢迎登录</view>
          <u--form :model="form" :rules="rules" ref="uForm" errorType="border-bottom">
            <u-form-item prop="username" borderBottom>
              <u-input
                v-model="form.username"
                placeholder="请输入用户名(admin)"
                border="none"
                clearable
              />
            </u-form-item>
            <u-gap height="16"></u-gap>
            <u-form-item prop="password" borderBottom>
              <u-input
                v-model="form.password"
                placeholder="请输入密码(123456)"
                border="none"
                clearable
                type="password"
              />
            </u-form-item>
            <u-gap height="24"></u-gap>
            <u-button type="primary" @click="submit">登 录</u-button>
          </u--form>
        </u-transition>
      </view>
      <view class="bottom bottom1"></view>
      <view class="bottom bottom2"></view>
      <view class="bottom bottom3"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from '@vue/composition-api'
import { onShow } from '@dcloudio/uni-app'
import { userLogin } from '@/api/modules/user.api.js'

const uForm = ref(null)

const form = ref({
  username: 'admin',
  password: '123456',
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }],
  password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
}

// 提交
async function submit() {
  try {
    await uForm.value.validate()
    const { username, password } = form.value
    if (username === 'admin' && password === '123456') {
      const { accessToken } = await userLogin(form.value)
      await this.$store.dispatch('user/setToken', accessToken)
      back() // 跳转到首页
    } else {
      uni.$u.toast('登录失败')
    }
  } catch (e) {
    console.log(e)
    uni.$u.toast('登录失败')
  }
}

// 返回到首页
function back() {
  uni.$to('/pages/index/index', 'tab')
}

onShow(() => {
  console.log('-------------login-show-------------')
})
</script>

<style lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  background-color: #0abeec;
  background-image: url('../../static/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .header {
    font-size: 28px;
    padding: 84px 20px 24px;
    color: #ffffff;
    text-align: center;
  }
  .login-form {
    position: relative;
    padding: 24px 15px;
    .form-box {
      height: 420px;
      background-color: #ffffff;
      border-radius: 5px;
      padding: 15px;
      .h2 {
        font-weight: bold;
        color: #333;
        font-size: 18px;
        padding-bottom: 30px;
      }
    }
    .bottom {
      position: absolute;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 311px;
      height: 10px;
      line-height: 20px;
      opacity: 0.8;
      border-radius: 0 0 5px 5px;
      background-color: #fafafa;
      z-index: 0;
      &.bottom2 {
        width: 251px;
        bottom: 4px;
        height: 20px;
        opacity: 0.6;
      }
      &.bottom3 {
        width: 222px;
        height: 30px;
        bottom: -6px;
        opacity: 0.4;
      }
    }
  }
}
</style>
